<!-- OtherFeeTypeSelectDialog.vue -->
<template>
  <el-dialog :model-value="dialogVisible" width="500px" class="other-fee-type-select-dialog"
    @close="handleClose" :close-on-click-modal="false">

    <!-- Dialog Header -->
    <template #header="{ titleId, titleClass }">
      <div class="dialog-header">
        <span :id="titleId" :class="titleClass">选择费用类型</span>
      </div>
    </template>

    <!-- Search Bar 
    <el-row>
      <el-col :span="24" style="padding-left: 24px;">
        <el-form :inline="true" :model="filter" class="demo-form-inline">
          <el-form-item label="名称">
            <el-input v-model="filter.name" placeholder="费用类型名称" clearable />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    -->

    <!-- Data List -->
    <el-table ref="table" v-loading="loading" :data="otherFeeTypeList" style="width: 100%" border
      @selection-change="handleSelectionChange" row-key="id">
      <el-table-column type="selection" :reserve-selection="true" width="55" />

      <el-table-column label="名称" align="center" prop="name" show-overflow-tooltip />


    </el-table>

    <!-- Pagination 
    <div style="margin-top: 20px; text-align: right">
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="fetchOtherFeeTypeData" />
    </div>
    -->

    <template #footer>
      <span class="dialog-footer">        
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleBatchSelect">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ElMessage } from 'element-plus'
import { Definition } from '../../public/engine/common/definition'
import { DataPage } from '../../public/network/communicationConverter'
import { Engine } from '../../public/engine/engine.js'
import { FundUiAction } from '../../public/engine/uiAction/fundUiAction.js'

export default {
  name: 'OtherFeeTypeSelectDialog',
  emits: ['select', 'close'],

    props: {
    fundUiAction: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      otherFeeTypeList: [],
      total: 0,
      selectedItems: [],
      filter: {
        name: ''
      },
      queryParams: {
        pageNum: 1,
        pageSize: Definition.gDefualPullDownPageSize
      },

      parentParamBack: null, //父类参数回传，不处理，完成选择时回传
    }
  },

  methods: {
    // Open dialog method
    // parentParamBack 父类参数回传，不处理，完成选择时回传
    open(selectedFeeTypes = [],parentParamBack) {
      this.dialogVisible = true
      this.filter.name = ''
      this.queryParams.pageNum = 1
      this.selectedFeeTypes = selectedFeeTypes || []
      this.parentParamBack = parentParamBack
      
      // Clear selection
      this.$nextTick(() => {
        this.$refs.table?.clearSelection();
      });
      
      this.fetchOtherFeeTypeData();
    },

    async fetchOtherFeeTypeData() {
      try {
        this.loading = true

        const res = await this.fundUiAction.getOtherFeeTypeData({
          pageInfo: new DataPage(this.queryParams.pageNum, 0, this.queryParams.pageSize),
          filter: this.filter
        })

        if (res && res.data && res.data.dataList) {
          this.otherFeeTypeList = res.data.dataList
          this.total = res.data.pageInfo.total
        } else if (res.resErr) {
          ElMessage.error('获取费用类型数据失败')
        }
      } catch (error) {
        console.error('获取费用类型数据失败:', error)
        ElMessage.error('获取费用类型数据失败')
      } finally {
        this.loading = false
      }
    },

    handleSearch() {
      this.queryParams.pageNum = 1
      this.fetchOtherFeeTypeData()
    },

    resetSearch() {
      this.filter.name = ''
      this.queryParams.pageNum = 1
      this.fetchOtherFeeTypeData()
    },

    // Handle selection change
    handleSelectionChange(selection) {
      this.selectedItems = selection
    },

    // Batch select fee types
    handleBatchSelect() {
      if (this.selectedItems.length === 0) {
        ElMessage.warning('请选择至少一个费用类型')
        return
      }

      this.$emit('select', this.selectedItems,this.parentParamBack)
      this.handleClose()
    },

    // Select single fee type
    handleSelect(item) {
      this.$emit('select', [item],this.parentParamBack)
      this.handleClose()
    },

    // Close dialog
    handleClose() {
      this.dialogVisible = false
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
/* Header styles */
.dialog-header {
  display: flex;
  align-items: baseline;
}

.dialog-header span:first-child {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}
</style>

<style>
.other-fee-type-select-dialog {
  max-width: 800px !important;
}
</style>